/* eslint-disable array-callback-return */
import React from 'react';
import router from 'umi/router';
import { Card, Button, Divider, message, Spin } from 'antd';
import { connect } from 'dva';
import { urlParse } from '@/utils/utils';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';

const { Description } = DescriptionList;

@connect(({ supplier, loading }) => ({
  supplier,
  loading: loading.models.supplier,
}))
class Details extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      supplyInfo: {
        suppInvoiceList: [],
        suppMailAddrList: [],
        suppBankAccountList: [],
        suppContactList: [],
        custCostCenterList: [],
        custAffixList: [],
        suppPrintInvoice: {},
      },
    };
  }

  componentDidMount() {
    const { location } = this.props;
    const { suppId } = this.state;

    const tempSuppId = urlParse(location.search).suppId ? urlParse(location.search).suppId : suppId;
    this.getDictList(() => this.getList(tempSuppId));
  }

  // 获取数据
  getList = suppId => {
    const {
      dispatch,
      supplier: { invoiceTypeList, taxerTypeList, bankList, genderList, hasChildList },
    } = this.props;
    if (suppId) {
      dispatch({
        type: 'supplier/getSuppInfo',
        payload: { suppId },
      }).then(res => {
        this.setState({ suppId });
        if (res.success && res.data) {
          const supplyInfo = res.data;
          Object.keys(supplyInfo).forEach(key => {
            if (!supplyInfo[key] && !(supplyInfo[key] instanceof Array)) {
              supplyInfo[key] = '';
            } else if (key === 'suppPrintInvoice') {
              supplyInfo[key].agtsrvInvType = this.matchDict(
                invoiceTypeList,
                supplyInfo[key].agtsrvInvType
              );
              supplyInfo[key].serInvType = this.matchDict(
                invoiceTypeList,
                supplyInfo[key].serInvType
              );
            } else if (supplyInfo[key] instanceof Array && supplyInfo[key].length) {
              supplyInfo[key].forEach(item => {
                const temp = item;
                if (item.taxerType) {
                  temp.taxerType = this.matchDict(taxerTypeList, item.taxerType);
                }
                if (item.bankId) {
                  temp.bankId = this.matchDict(bankList, item.bankId);
                }
                if (item.gender) {
                  temp.gender = this.matchDict(genderList, item.gender);
                }
                if (item.hasChild) {
                  temp.hasChild = this.matchDict(hasChildList, item.hasChild);
                }
              });
            }
          });

          this.setState({ supplyInfo });
        } else {
          message.warning(`${res.message || '暂无数据！'}`);
        }
      });
    } else {
      router.push('/salemanage/supplier/index');
    }
  };

  // 获取字典:
  // 发票类型MINI_INV_TYPE，纳税人类型TAXPAYER_TYPE、所属银行BANK_ID、性别GENDER、是否有小孩HAS_CHILD、
  getDictList = callback => {
    const { dispatch } = this.props;
    dispatch({
      type: 'supplier/queryDictItemsByCodes',
      payload: ['MINI_INV_TYPE', 'TAXPAYER_TYPE', 'BANK_ID', 'GENDER', 'HAS_CHILD'],
    }).then(res => {
      if (res.success) {
        callback();
      }
    });
  };

  // 匹配字典
  matchDict = (list, id) => {
    let dict = null;
    list.map(item => {
      if (String(item.itemCode) === String(id)) {
        dict = item.itemName;
      }
    });
    return dict;
  };

  render() {
    const { loading } = this.props;
    const { supplyInfo } = this.state;
    return supplyInfo.name ? (
      <PageHeaderWrapper>
        <Card
          title={<span style={{ fontWeight: 'bolder' }}>供应商信息</span>}
          style={{ marginBottom: 24 }}
          bordered={false}
        >
          <div>
            <DescriptionList
              title={
                <span style={{ fontSize: 14, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                  基本信息
                </span>
              }
            >
              <Description term="供应商名称">{supplyInfo.name || '--'}</Description>
              {/* <Description term="供应商简称">{supplyInfo.shortName}</Description> */}
              <Description term="统一社会信用代码">{supplyInfo.uniCreditCode || '--'}</Description>
              <Description term="供应商类型">{supplyInfo.typeName || '--'}</Description>
              <Description term="供应商编号">{supplyInfo.suppCode || '--'}</Description>
              <Description term="工作邮箱">{supplyInfo.email || '--'}</Description>
              <Description term="地区">
                {supplyInfo.areaParentName}
                {supplyInfo.areaName}
              </Description>
              <Description term="办公地址">{supplyInfo.officeAddr || '--'}</Description>
              <Description term="服务状态">{supplyInfo.statusName || '--'}</Description>
              <Description term="联系电话">{supplyInfo.tel || '--'}</Description>
              <Description term="备注">{supplyInfo.remark || '--'}</Description>
            </DescriptionList>
          </div>
          {/* 供应商开票信息 */}
          {/* {
								supplyInfo.suppPrintInvoice.agtsrvInvType ?
									<div>
										<Divider />
										<DescriptionList title={<span style={{ fontSize: 16, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>开票信息</span>}>
											<Description term="代收代付票据类型">{supplyInfo.suppPrintInvoice.agtsrvInvType}</Description>
											<Description term="代收代付税率">{supplyInfo.suppPrintInvoice.agtsrvTaxRate}%</Description>
											<Description term="服务费票据类型">{supplyInfo.suppPrintInvoice.serInvType}</Description>
											<Description term="服务费税率">{supplyInfo.suppPrintInvoice.serTaxRate}%</Description>
											<Description term="备注">{supplyInfo.suppPrintInvoice.remark}</Description>
										</DescriptionList>
									</div> : null
							} */}
          {/* 增值税发票信息 */}
          {supplyInfo.suppInvoiceList && supplyInfo.suppInvoiceList.length ? (
            <div>
              <Divider />
              {supplyInfo.suppInvoiceList.map((item, index) => (
                <div key={item.invId}>
                  {index === 0 ? null : <Divider dashed />}
                  <DescriptionList
                    title={
                      index === 0 ? (
                        <span
                          style={{ fontSize: 14, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}
                        >
                          发票信息
                        </span>
                      ) : null
                    }
                  >
                    <Description term="增值税单位名称">{item.vatCoprName || '--'}</Description>
                    <Description term="发票类型">{item.invTypeName || '--'}</Description>
                    <Description term="纳税人识别号">{item.taxerIdNo || '--'}</Description>
                    <Description term="开户行">{item.openBank || '--'}</Description>
                    <Description term="银行账号">{item.bankAcco || '--'}</Description>
                    <Description term="开票电话">{item.invPhone || '--'}</Description>
                    <Description term="开票地址">{item.invArea || '--'}</Description>
                    <Description term="备注">{item.remark || '--'}</Description>
                  </DescriptionList>
                </div>
              ))}
            </div>
          ) : null}
          {/* 邮寄地址信息 */}
          {supplyInfo.suppMailAddrList && supplyInfo.suppMailAddrList.length ? (
            <div>
              <Divider />
              {supplyInfo.suppMailAddrList.map((item, index) => (
                <div key={item.mailAddrId}>
                  {index === 0 ? null : <Divider dashed />}
                  <DescriptionList
                    title={
                      index === 0 ? (
                        <span
                          style={{ fontSize: 14, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}
                        >
                          邮寄地址信息
                        </span>
                      ) : null
                    }
                  >
                    <Description term="联系人姓名">{item.contPerName || '--'}</Description>
                    <Description term="联系人电话">{item.contPerPhone || '--'}</Description>
                    <Description term="邮寄地址">
                      {item.mailArea}
                      {item.mailAddr}
                    </Description>
                    <Description term="备注">{item.remark || '--'}</Description>
                  </DescriptionList>
                </div>
              ))}
            </div>
          ) : null}
          {/* 银行账户信息 */}
          {supplyInfo.suppBankAccountList && supplyInfo.suppBankAccountList.length ? (
            <div>
              <Divider />
              {supplyInfo.suppBankAccountList.map((item, index) => (
                <div key={item.bankAccoId}>
                  {index === 0 ? null : <Divider dashed />}
                  <DescriptionList
                    title={
                      index === 0 ? (
                        <span
                          style={{ fontSize: 14, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}
                        >
                          银行账户信息
                        </span>
                      ) : null
                    }
                  >
                    <Description term="城市">{item.areaName || '--'}</Description>
                    <Description term="银行">{item.bankId || '--'}</Description>
                    <Description term="开户行">{item.openBank || '--'}</Description>
                    <Description term="银行账号">{item.bankAcco || '--'}</Description>
                    <Description term="开户单位名称">{item.accoHolderName || '--'}</Description>
                    <Description term="备注">{item.remark || '--'}</Description>
                  </DescriptionList>
                </div>
              ))}
            </div>
          ) : null}
          {/* 联系人信息 */}
          {supplyInfo.suppContactList && supplyInfo.suppContactList.length ? (
            <div>
              <Divider />
              {supplyInfo.suppContactList.map((item, index) => (
                <div key={item.contPerId}>
                  {index === 0 ? null : <Divider dashed />}
                  <DescriptionList
                    title={
                      index === 0 ? (
                        <span
                          style={{ fontSize: 14, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}
                        >
                          联系人信息
                        </span>
                      ) : null
                    }
                  >
                    <Description term="姓名">{item.name || '--'}</Description>
                    <Description term="邮箱">{item.email || '--'}</Description>
                    <Description term="职位">{item.position || '--'}</Description>
                    <Description term="手机号码">{item.phoneNo || '--'}</Description>
                    <Description term="固定电话">{item.tel || '--'}</Description>
                    <Description term="备注">{item.remark || '--'}</Description>
                  </DescriptionList>
                </div>
              ))}
            </div>
          ) : null}
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button onClick={() => window.history.go(-1)}>返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    ) : (
      <div style={{ position: 'relative', top: '50%', textAlign: 'center' }}>
        <Spin tip="Loading..." spinning={loading} />
      </div>
    );
  }
}

export default Details;
